<template>
  <div class="pledge">
    <div class="left">
      <transition name="slide">
        <i v-if="mm > 0">{{mm}}</i>
      </transition>
        <p v-for="item in arr"
        :key="item.money"
        @click="add(item.money)">
        <img :src='item.img' alt="">
        </p>
      <!-- <p v-for="item in arr"
      :key="item.money"
      @click="add(item.money)">
      <img :src='item.img' alt="">
      </p> -->
      </div>
    <div class="right" @click="clear">
      {{ pledgeMoney > 0 ? pledgeMoney : '下注金额'}}
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      arr: [
        {
          money: 20,
          img: require('../assets/chip-20.png')
        },
        {
          money: 50,
          img: require('../assets/chip-50.png')
        },
        {
          money: 100,
          img: require('../assets/chip-100.png')
        },
        {
          money: 200,
          img: require('../assets/chip-200.png')
        }
      ],
      mm: 0,
      show: false
    }
  },
  props: ['pledgeMoney'],
  methods: {
    add (money) {
      this.$emit('changePledgeMoney', this.pledgeMoney + money)
    },
    clear () {
      this.$emit('changePledgeMoney', 0)
    }
  },
  watch: {
    pledgeMoney (newnum, oldnum) {
      this.mm = newnum - oldnum
      // console.log(this.mm)
      setTimeout(() => {
        this.mm = 0
      }, 1000)
    }
  }
}
</script>

<style lang="less" scoped>
.pledge{
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding: 0 15px;
}
img{
  width: 100%;
  height: 100%;
}
.left{
  width: 120px;
  height: 120px;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  justify-content: space-between;
  position: relative;
  i{
      position: absolute;
      top: 40px;
      left: 300px;
      color: red;
    }
  P{
    width: 55px;
    height: 55px;
  }
}
.slide-enter-active {
  transition: all 1s ease;
}
// .slide-leave-active {
//   transition: all 2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
// }
.slide-enter
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(-500%);
  opacity: 0;
}
.right{
  width: 100px;
  height: 100px;
  background: url(../assets/put-chips.png) no-repeat;
  background-size: contain;
  text-align: center;
  line-height: 100px;
  color: rgba(223, 16, 9, 0.829);
}
</style>
